/* stylelint-disable at-rule-no-unknown,at-rule-empty-line-before */
.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapt-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ng-select {
  position: relative;
  display: block;
  @extend .border-box;
  div,
  input,
  span {
    @extend .border-box;
  }
  [hidden] {
    display: none;
  }
  &.ng-select-searchable {
    .ng-select-container .ng-value-container .ng-input {
      opacity: 1;
    }
  }
  &.ng-select-opened .ng-select-container {
    z-index: 1001;
  }
  &.ng-select-disabled {
    //pointer-events: none;
    .ng-select-container {
      .ng-value-container {
        .ng-placeholder,
        .ng-value {
          cursor: not-allowed;
        }
        .ng-input {
          display: none;
        }
      }
    }
    .ng-arrow-wrapper {
      cursor: default;
    }
  }
  &.ng-select-filtered {
    .ng-placeholder {
      display: none;
    }
  }
  .ng-select-container {
    color: #333;
    cursor: pointer;
    display: flex;
    outline: none;
    overflow: hidden;
    position: relative;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    .ng-value-container {
      //display: flex;
      //flex: 1;
      .ng-input {
        opacity: 0;
        > input {
          box-sizing: content-box;
          background: none transparent;
          border: 0 none;
          box-shadow: none;
          outline: none;
          cursor: pointer;
          width: 100%;
          color: #bfbfbf;
          &::-ms-clear {
            display: none;
          }
        }
      }
    }
    &:hover, &:focus, &:active {
      .ng-clear-wrapper {
        opacity: 1;
        transition: opacity 1s ease;
      }
    }
  }
  &.ng-select-single {
    &.ng-select-filtered {
      .ng-select-container .ng-value-container .ng-value {
        visibility: hidden;
      }
    }
    .ng-select-container {
      .ng-value-container {
        @extend .wrapt-text;
        .ng-value {
          @extend .wrapt-text;
          .ng-value-icon {
            display: none;
          }
        }
        .ng-input {
          position: absolute;
          left: 0;
          width: 100%;
        }
      }
    }
  }
  &.ng-select-multiple {
    &.ng-select-disabled {
      > .ng-select-container .ng-value-container .ng-value {
        .ng-value-icon {
          display: none;
        }
      }
    }
    .ng-select-container {
      .ng-value-container {
        flex-wrap: wrap;
        .ng-placeholder {
          position: absolute;
          z-index: 1;
        }
        .ng-value {
          display: inline-block;
          white-space: nowrap;
          &.disabled {
            .ng-value-icon {
              display: none;
            }
          }
          .ng-value-icon {
            cursor: pointer;
          }
        }
        .ng-input {

          //flex: 1;
          //z-index: 2;
        }
      }
    }
  }
  .ng-clear-wrapper {
    cursor: pointer;
    position: absolute;
    width: 17px;
    user-select: none;
    top: 1px;
    right: 7px;
    z-index: 2;
    opacity: 0;
    transition: opacity .6s ease;
    .ng-clear {
      display: inline-block;
      font-size: 12px;
      line-height: 2;
    }
  }
  .ng-spinner-loader {
    border-radius: 50%;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 2px solid rgba(66, 66, 66, 0.2);
    border-right: 2px solid rgba(66, 66, 66, 0.2);
    border-bottom: 2px solid rgba(66, 66, 66, 0.2);
    border-left: 2px solid #424242;
    transform: translateZ(0);
    animation: load8 0.8s infinite linear;
    &:after {
      border-radius: 50%;
      width: 17px;
      height: 17px;
    }
    @-webkit-keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  }
  .ng-arrow-wrapper {
    cursor: pointer;
    position: absolute;
    text-align: center;
    user-select: none;
    top: 5px;
    right: 5px;
    opacity: 1;
    transition: opacity .6s ease;
    .ng-arrow {
      display: inline-block;
    }
  }
  .ng-btn-search {
    .ng-arrow-wrapper {
      right: 17px;
    }
    .ng-clear-wrapper {
      right: 19px;
    }
    .apes-btn-search {
      padding: 0 2px !important;
      position: absolute;
      right: 4px;
      top: -1px;
      color: rgba(0, 0, 0, 0.25);
      background-color: transparent;
      border-color: transparent;
      z-index: 3;
      &:hover {
        color: #333;
      }
    }
  }
}
